<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title>的士平台便签服务</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/ydui.css"/>
		<link rel="stylesheet" href="//at.alicdn.com/t/font_384526_g1cc511zr4vuc8fr.css" />
		<link rel="stylesheet" type="text/css" href="css/taxi.css" />
		<script src="js/adaption.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<ul class="note-lists">
			<li id="1" class="note-lists-box">
				<a class="to-notes-info" href="notes-info.html">
				<div class="note-scroll-wrapper clearfix">
					<div class="note-lists-wrap left">
						<div class="note-list-top clearfix">
							<p class="noted-time left">2017-8-14 12:30</p>
							<p class="thumbnail star right"><img src="images/star.png" /></p>
						</div>
						<p class="note-words-short">示例：便签使用说明</p>
					</div>
					<div class="del-btn">删除</div>
				</div>
				</a>
			</li>
			<li id="2" class="note-lists-box">
				<div class="note-scroll-wrapper clearfix">
					<div class="note-lists-wrap left">
						<div class="note-list-top clearfix">
							<p class="noted-time left">2017-8-10 12:30</p>
							<p class="thumbnail star right"><img src="images/star.png" /></p>
						</div>
						<p class="note-words-short">示例：今日待办清单</p>
					</div>
					<div class="del-btn">删除</div>
				</div>
			</li>
			<li id="3" class="note-lists-box">
				<div class="note-scroll-wrapper clearfix">
					<div class="note-lists-wrap left">
						<div class="note-list-top clearfix">
							<p class="noted-time left">2017-8-6 12:30</p>
							<p class="thumbnail star right"><img src="images/star.png" /></p>
						</div>
						<p class="note-words-short">示例：今日待办清单</p>
					</div>
					<div class="del-btn">删除</div>
				</div>
			</li>
			<li id="4" class="note-lists-box">
				<div class="note-scroll-wrapper clearfix">
					<div class="note-lists-wrap left">
						<div class="note-list-top clearfix">
							<p class="noted-time left">2017-8-4 12:30</p>
							<p class="thumbnail star right"><img src="images/star.png" /></p>
						</div>
						<p class="note-words-short">示例：今日待办清单</p>
					</div>
					<div class="del-btn">删除</div>
				</div>
			</li>
		</ul>
		
		<a class="add_noted_btn" href="add_note.html"><i class="iconfont icon-addpassengers"></i></a>
		<script src="js/ydui.js"></script>
		<script>
			$(function() {
				var Nb_wid=$(".note-lists-box").width(),
					dt_wid=Math.ceil($(".del-btn").width()+0.5);
				// 设定每一行的宽度=屏幕宽度+按钮宽度
				$(".note-scroll-wrapper").width( Nb_wid + dt_wid);
				// 设定常规信息区域宽度=屏幕宽度
				$(".note-lists-wrap").width(Nb_wid);

				// 获取所有行，对每一行设置监听
				var lines = $(".note-lists-wrap");
				var len = lines.length;
				var lastX, lastXForMobile;

				// 用于记录被按下的对象
				var pressedObj; // 当前左滑的对象
				var lastLeftObj; // 上一个左滑的对象

				// 用于记录按下的点
				var start;

				// 网页在移动端运行时的监听
				for(var i = 0; i < len; ++i) {
					lines[i].addEventListener('touchstart', function(e) {
						lastXForMobile = e.changedTouches[0].pageX;
						pressedObj = this; // 记录被按下的对象 

						// 记录开始按下时的点
						var touches = event.touches[0];
						start = {
							x: touches.pageX, // 横坐标
							y: touches.pageY // 纵坐标
						};
					});

					lines[i].addEventListener('touchmove', function(e) {
						// 计算划动过程中x和y的变化量
						var touches = event.touches[0];
						delta = {
							x: touches.pageX - start.x,
							y: touches.pageY - start.y
						};

						// 横向位移大于纵向位移，阻止纵向滚动
						if(Math.abs(delta.x) > Math.abs(delta.y)) {
							event.preventDefault();
						}
					});

					lines[i].addEventListener('touchend', function(e) {
						if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
							$(lastLeftObj).stop().animate({
								marginLeft: "0"
							}, 500); // 右滑
							lastLeftObj = null; // 清空上一个左滑的对象
						}
						var diffX = e.changedTouches[0].pageX - lastXForMobile;
						if(diffX < -40) {
							$(pressedObj).stop().animate({
								marginLeft: "-1rem"
							}, 500); // 左滑
							lastLeftObj && lastLeftObj != pressedObj &&
								$(lastLeftObj).stop().animate({
									marginLeft: "0"
								}, 500); // 已经左滑状态的按钮右滑
							lastLeftObj = pressedObj; // 记录上一个左滑的对象
						} else if(diffX > 40) {
							if(pressedObj == lastLeftObj) {
								$(pressedObj).stop().animate({
									marginLeft: "0"
								}, 500); // 右滑
								lastLeftObj = null; // 清空上一个左滑的对象
							}
						}
					});
				}
				//删除便签
				$(".note-lists").on("click",".del-btn",function() {
					var that=$(this);
					YDUI.dialog.confirm( '是否删除此条便签？', function () {		                
						that.parents(".note-lists-box").remove();
		            });
				});
				//便签排序方法
				function checkitems(){
					var ul = $(".note-lists");
						var lis = [];
						lis=$(".note-lists li").not(".toped");
						var ux=[]
						console.log(lis);
						//循环提取时间，并调用排序方法对取消指定的li排序
						for(var i=0,len=lis.length;i<len;i++){
							var temp=[];
							temp.dom=lis.eq(i);
							temp.date=new Date(lis.eq(i).find(".noted-time").html().replace(/-/g,'/'));
							console.log(temp.date);
							ux.push(temp);
						}
						//数组排序，时间进行比较
						ux.sort(function(a,b){
							var myDate = new Date();
						    var year = myDate.getYear();
						    if(a.date.getYear < year && b.date.getYear == year){
						        return true;
						    }
						    return b.date - a.date;
						});
						//移除原来的li
						lis.remove();
						//重新添加排序后的li
						for(var i=0,len=ux.length;i<len;i++){
							ul.append(ux[i].dom);
						}
				}
				//便签置顶或恢复原顺序
				$(".note-lists").on("click",".note-lists-box .star",function(){
					var parent=$(this).parents(".note-lists-box");
					
					if(parent.is(".toped")){
						parent.removeClass("toped");
						checkitems();
						
						$(this).children("img").attr("src","images/star.png");
					}
					else{
						
						parent.addClass("toped");
						$(this).children("img").attr("src","images/star_red.png");
						$(".note-lists").prepend($(this).parents(".note-lists-box"));
					}
					
				})
			});
		</script>
	</body>

</html>